<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>表单元素（上）</title>
	<style>
		h3{
			color: green;
		}
	</style>
</head>
<body>

	<h3> 定义普通的表单 </h3>
	<form action="http://xxx" method="get">
		<input type="text">
		<button> 提交 </button>
	</form>

	<h3> 表单禁止自动提示功能，设置 autocomplete="off" </h3>
	<form action="http://xxx" method="get" autocomplete="off">
		<input type="text">
		<button> 提交 </button>
	</form>

	<h3> 输入框 </h3>
	 <form  name="other" id="other" action="http://www.baidu.com" method="post" target="_blank">
       		
       	<fieldset>
       		<legend> type="text" </legend>
       		设置文本框 list <input type="text" list="fruit"> <br>
       		设置文本框输入字符长度10 <input type="text" maxlength="10"> <br>
       		设置文本框长度40 <input type="text" size="40"> <br>
       		设置输入字符的提示 <input type="text" placeholder="请输入"> <br>
       		设置文本框只读状态	<input type="text" value="123456" readonly> <br>
       		设置文本框禁用 <input type="text" disabled> <br>
       		设置文本框初始值 0000 <input type="text" value="0000"> <br>
       		设置文本框必须输入一个值 <input type="text" required>
       	</fieldset>

       	<fieldset>
       		<legend> type="password" </legend>
       		属性值同 type="text" <br>
       		设置密码框 <input type="password">
       	</fieldset>

       	<fieldset>
       		<legend> type="search" </legend>
       		属性值同 type="text" <br>
       		设置搜索框 <input type="search">
       	</fieldset>

       	<fieldset>
       		<legend> type="number / range" </legend>
       		设置数字文本框 <input type="number"> <br>
       		设置数值范围文本框 <input type="range"> <br>
       		设置数字框可接受的最小、最大值 <input type="number" min="28" max="88"> <br>
       		设置设置范围文本框的步进 <input type="number" step="2">
       	</fieldset>

       	<fieldset>
       		<legend> type="date" </legend>
       		浏览器支持不完整，这个自己测试 <br>
       		设置month <input type="month">
       	</fieldset>

       	<fieldset>
       		<legend> type="color" </legend>
       		获取颜色的文本框 <input type="color">
       	</fieldset>

       	<fieldset>
       		<legend> type="checkbox / radio" </legend>
       		复选框，第二项默认勾选 <br>
       		音乐 <input type="checkbox" name="hobby">
       		美术 <input type="checkbox" name="hobby" checked>
       		体育 <input type="checkbox" name="hobby">
       		<br>
       		单选框，默认选中第二项 <br>
       		<input type="radio" name="sex" value="男">男
       		<input type="radio" name="sex" value="女" checked>女
       	</fieldset>

       	<fieldset>
       		<legend> type="image" </legend>
       		属性同 img 元素 <br>
       		图片按钮 <input type="image" src="../img/baidu_logo.png" width="100">
       	</fieldset>

       	<fieldset>
       		<legend> type="email / tel / url" </legend>
       		属性值同 type="text" <br>
       		email <input type="email"> <br> <br>
       		tel <input type="tel"> <br> <br>
       		url <input type="url"> <br> <br>
       	</fieldset>

       	<fieldset>
       		<legend> type="file" </legend>
       		上传控件 <input type="file">
       	</fieldset>


       	<fieldset>
       		<legend> type="submit / reset / button" </legend>
       		<input type="submit"> 
			<input type="reset"> 
			<input type="button"> 
       	</fieldset>
    </form>

    <datalist id="fruit">
    	<option value="1"> 苹果 </option>
    	<option value="2"> 桔子 </option>
    	<option value="3" label="香蕉"> 香蕉 </option>
    </datalist>

</body>
</html>